<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="../jquery-easyui-1.9.15//jquery.min.js" type="text/JavaScript"></script>
  <script type="text/javascript" src="../jquery-easyui-1.9.15/jquery.easyui.min.js"></script>
  <link href="../jquery-easyui-1.9.15/themes/default/easyui.css" rel="stylesheet" type="text/css" />
  <link href="../jquery-easyui-1.9.15/themes/icon.css" rel="stylesheet" type="text/css" />
  <script src="../jquery-easyui-1.9.15/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <!-- <script src="citiselect.js" type="text/javascript"></script> -->
  <script src="pca-code.js" type="text/javascript"></script>
  <title>首页</title>
</head>

<body>
  <div id="p" class="easyui-panel" style="width: 500px; height: 200px; padding: 10px" title="html创建组件" iconCls="icon-ok"
    collapsible="true">
    测试内容123 <br />
    <button onclick="getDataStr()">获取值</button>
    <button onclick="postDataStr()">发送</button>
  </div>
  <div>
    <span>省份：</span>
    <select id="province" name="province" class="easyui-combobox" style="width: 200px">　　　　　　　　 　　　　　　
    </select>　　　
    <span>城市：</span>　　　　
    <select id="citys" name="citys" class="easyui-combobox" style="width: 200px">　　　　　　　　 　　　　　　
    </select>　　
    <span>区县：</span>
    <select id="county" name="county" class="easyui-combobox" style="width: 200px">
    </select>　
  </div>
</body>

<script type="text/javascript">
  showPro();
  // 省
  function showPro() {
    var jsonstr = datadict111
    jsonstr.unshift({
      code: "",
      name: "请选择省份..",
    });
    $("#province").combobox({
      data: jsonstr,
      valueField: "code",
      textField: "name",
      editable: false,
      onLoadSuccess: function (data) {
        var data = $("#province").combobox("getData");
        //console.log(JSON.stringify(data))
        if (data.length > 0) {
          $("#province").combobox("select", data[0].code);
        }
      },
      onChange: function (newValue, oldValue) {
        if (newValue) {
          showCity(newValue);
          $("#citys").combobox("clear");
          $("#county").combobox("clear");
        }
      },
      onSelect: function (val) {
        console.log('省分取值',val)
      },

    });
  }
  // 市
  function showCity(newValue) {
    var cityJson = datadict111;
    //console.log(JSON.stringify(cityJson))
    $.each(cityJson, function (i, val) {
      if (val.code == newValue) {
        //判断省份的code 是否与省份的val 相同
        //console.log(JSON.stringify(val))
        val.childs.unshift({
          code: "",
          name: "请选择城市..",
        });
        $("#citys").combobox({
          data: val.childs,
          valueField: "code",
          textField: "name",
          editable: false,
          onLoadSuccess: function (data) {
            var data = $("#citys").combobox("getData");
            //console.log(JSON.stringify(data))
            if (data.length > 0) {
              $("#citys").combobox("select", data[0].code);
            }
          },
          onChange: function (newValue, oldValue) {
            //console.log(newValue, oldValue)
            if (newValue) {
              showCounty(String(newValue));
            }
          },
        });
      }
    });
  }
  // 区
  function showCounty(newValue) {
    var cityJson = datadict111;
    $.each(cityJson, function (i, val) {
      if (val.code.substr(0, 2) == newValue.substr(0, 2)) {
        var pro_childs = val.childs;
        $.each(pro_childs, function (j, proVal) {
          // 然后 省份循环 寻找与省份对应的城市
          if (proVal.code == newValue) {
            //判断省份的code 是否与省份的val 相同
            proVal.childs.unshift({
              code: "",
              name: "请选择区/县..",
            });
            $("#county").combobox({
              data: proVal.childs,
              valueField: "code",
              textField: "name",
              editable: false,
              onLoadSuccess: function (data) {
                var data = $("#county").combobox("getData");
                //console.log(JSON.stringify(data))
                if (data.length > 0) {
                  $("#county").combobox("select", data[0].code);
                }
              },
            });
          }
        });
      }
    });

  }

  function getDataStr(){
    var sheng = $('#province').combobox('getValue');
    var shi = $('#citys').combobox('getValue');
    var qu = $('#county').combobox('getValue');
    console.log('省：',sheng, '市：',shi, '区：',qu)
  }
  function postDataStr(){
    $('#province').combobox('setValue', '130000');
    $('#citys').combobox('setValue', '130100');
    $('#county').combobox('setValue', '130104');
    
  }
  




</script>

</html>